﻿define(["/mock/menu.js",
  "jQuery",
  "yvanui.core", "yvanui.components", "yvanui.form",
  "jqxtree", "jqxtabs", "jqxsplitter", "jqxtoolbar", "jqxtreegrid",
  "jqxgrid", "jqxloader"], function (menu) {
  return {

    addTab: function (option) {
      var mainTabId = $.yvan.createId('mainTab');
      var html = '<div id="' + mainTabId + '" class="yvanui-maintab"><div yvan="loader"></div></div>';
      $('#mtt').jqxTabs('addLast', option.title, html);

      var $targetDOM = $('#' + mainTabId);
      $targetDOM.find('[yvan=loader]').jqxLoader({
        width: '100%',
        height: '100%',
        autoOpen: true,
        text: "正在载入,请稍后...",
        textPosition: "bottom"
      }).css({
        "margin-top": 32
      });

      try {
        require([option.href], function (mod) {
          if ($.type(mod) === 'function') {
            mod = mod.call(option);
          }

          $.yvan.render($targetDOM, option.context, mod);
          $targetDOM.find('[yvan=loader]').jqxLoader('close');
        });

      } catch (err) {
        console.log(err);
        alert(err);
      }
    },

    initialize: function () {
      var me = this;
      $(document).ready(function () {
        $('#mainSplitter').jqxSplitter({
          width: '100%',
          height: '100%',
          panels: [
            { size: 210 },
            { collapsible: false }
          ]
        });

        $('#mtree').jqxTree({
          source: menu.root,
          width: '100%',
          height: '100%',
        }).on('itemClick', function (event) {
          var htmlElement = event.args.element;
          var item = $(this).jqxTree('getItem', htmlElement);
          if (item.value) {
            me.addTab({
              href: item.value,
              title: item.label
            });
          }
        });

        $('#mtt').jqxTabs({
          showCloseButtons: true,
          height: '100%',
          width: '100%'
        }).css({
          "border-top-width": 0,
          "border-left-width": 0,
        });

        var data = [];
        /*
        for (var i = 0; i < 60; i++) {
          //6000个根
          var l1 = {
            Id: 'L1-' + i,
            ParentId: '',
            Name: 'L1' + i,
            Remark: '备注-L1' + i,
            CreateAt: new Date(),
            UpdateAt: new Date()
          };
          data.push(l1);

          for (var j = 0; j < 10; j++) {
            //每个根有1000个子集
            var l2 = {
              Id: l1.Id + '.L2-' + j,
              ParentId: l1.Id,
              Name: 'L2' + j,
              Remark: '备注-L2' + j,
              CreateAt: new Date(),
              UpdateAt: new Date()
            };
            data.push(l2);

            for (var k = 0; k < 10; k++) {
              //100个下级
              var l3 = {
                Id: l2.Id + '.L3-' + k,
                ParentId: l2.Id,
                Name: 'L3' + k,
                Remark: '备注-L3' + k,
                CreateAt: new Date(),
                UpdateAt: new Date()
              };
              data.push(l3);

              for (var l = 0; l < 10; l++) {
                //每个根有1000个子集
                var l4 = {
                  Id: l3.Id + '.L4-' + l,
                  ParentId: l3.Id,
                  Name: 'L4' + j,
                  Remark: '备注-L4' + j,
                  CreateAt: new Date(),
                  UpdateAt: new Date()
                };
                data.push(l4);
              }
            }
          }
        }
        console.log('data finish:' + data.length);


        var source =
          {
            datatype: "json",
            datafields: [
              { name: 'Id', type: 'string' },
              { name: 'ParentId', type: 'string' },
              { name: 'Name', type: 'string' },
              { name: 'Remark', type: 'string' },
              { name: 'CreateAt', type: 'date' },
              { name: 'UpdateAt', type: 'date' },
            ],
            hierarchy: {
              keyDataField: { name: 'Id' },
              parentDataField: { name: 'ParentId' }
            },
            localdata: data
          };

        var dataAdapter = new $.jqx.dataAdapter(source);
        console.log('dataAdapter finish');

        $('#treegrid').jqxTreeGrid({
          source: dataAdapter,
          width: '100%',
          height: '100%',
          pageable: true,
          pagerMode: 'advanced',
          columnsResize: true,
          sortable: true,
          filterable: true,
          ready: function () {
            console.log('ready', this);
          },
          columns: [
            { text: '名称', dataField: 'Name' },
            { text: '备注', dataField: 'Remark' },
            { text: '创建时间', dataField: 'CreateAt', cellsFormat: 'd' },
            { text: '更新时间', dataField: 'UpdateAt', cellsFormat: 'd' },
          ]
        }).css({
          'border-width': 0
        });
        */
      });
    }
  };
});